<template>
	<view class="content">
		<!-- 地区选择和个人中心 -->
		<view class="title_content">
			<!-- 点击跳转城市页city?address
					address 当前的城市位置 
			 -->
			<navigator class="area_name" url="../city/city">
				{{address}}
			</navigator>
			<image class="downIcon" src="/static/images/down.png" />
			<!-- 点击跳转用户中心页 personal -->
			<navigator class="people" url="/pages/personal/personal">
				<image class="people-img" src="/static/images/people.png" />
			</navigator>
		</view>
		<!-- 目录 -->
		<view class="menu_content">

			<view class="menu_item" @click="classfiyDetail" id="40" data-category='美食'>

				<image src="/static/images/eat.png" />
				<text>美食</text>

			</view>

			<view class="menu_item" @click="classfiyDetail" id="45" data-category='KTV'>
				<image src="/static/images/ktv.png" />
				<text>KTV</text>
			</view>
			<view class="menu_item" @click="classfiyDetail" id="48" data-category='足疗/按摩'>
				<image src="/static/images/foot.png" />
				<text>足疗/按摩</text>
			</view>
			<view class="menu_item" @click="classfiyDetail" id="41" data-category='酒店'>
				<image src="/static/images/hotel.png" />
				<text>酒店</text>
			</view>
			<view class="menu_item" @click="classfiyDetail" id="49" data-category='丽人/美发'>
				<image src="/static/images/improve.png" />
				<text>丽人/美发</text>
			</view>
		</view>
		<!-- 灰线 -->
		<view class="line_gray"></view>
		<!-- 
			ShopList 猜你喜欢
				title 标题,"猜你喜欢"
				:list 商铺列表
				:loading 数据是否加载中
		 -->
		<ShopList title="猜你喜欢" :list="shops"></ShopList>

	</view>

</template>

<script>
	/* 引入ShopList 店铺列表组件 */
	import ShopList from '../../components/ShopList.vue'

	/*引入QQMap地图SDK*/
	import QQMapWX from '../../utils/qqmap-wx-jssdk.js'

	/*实例化QQ地图对象*/
	const map = new QQMapWX({
		key: 'B37BZ-AHLWS-CFFO5-6WF3J-5CQ6E-KGBQ6'
	})

	/*全局的数据*/
	const {
		globalData
	} = getApp();

	/*数据库*/
	const db = wx.cloud.database();

	export default {
		data() {
			return {
				address: '加载中...',
				shops: [],
				page: 0,
				shouldUpdata: true
			}
		},

		/*注册组件*/
		components: {
			ShopList
		},

		/*页面加载完成*/
		onLoad() {

			let openid = uni.getStorageSync('openid');
			console.log(openid,' openid')
			if (!openid) {
				this.getOpenId();
			}
		},

		/*页面展示*/
		onShow() {

			this.shouldUpdata = true
			this.shops = [],
				this.page = 0
			this.address = globalData.address

			if (!globalData.address) {
				let res = this.getLocation()
					.then((data) => {
						this.getPosition(data).then((data) => {
							this.getShops(data)
						});
					})
			} else {

				this.getShops(this.address)
			}
			globalData.address = this.address

		},

		/*上拉加载*/
		onReachBottom() {
			//判断用户下拉，如果到底没数据了就不更新了
			if (this.shouldUpdata) {
				this.updataShops(this.address);
			}


		},

		methods: {

			/* 获取经纬度地址信息,使用uniApp方法获取经纬度 */
			getLocation() {
				return new Promise((resolve) => {
					uni.getLocation({
						success: (res) => {

							resolve(res);
						}
					});
				})
			},

			/*解析经纬度，获得地址*/
			getPosition({
				latitude,
				longitude
			}) {

				let _this = this;
				return new Promise((resolve) => {
					map.reverseGeocoder({
						location: {
							latitude,
							longitude
						},
						success: ({
							result: {
								address_component: {
									city
								}
							}
						}) => {

							resolve(city);
							_this.address = city;
							globalData.address = city;
						}
					})
				})
			},

			/*获取openId*/
			getOpenId() {
				console.log('getOpenId')
				return new Promise((resolve) => {
					wx.cloud.callFunction({
						name: 'login',
						success: ({
							result: {
								openid
							}
						}) => {
							console.log(openid, 'openid');
							resolve(openid);
							uni.setStorageSync('openid', openid);
						}
					})
				})
			},

			/*获取数据*/
			getShops(address) {
				//TODO: 做一个加载的状态

				uni.showLoading({
					title: '数据加载中……'
				})

				const n = 5;
				const start = this.page * n;

				return new Promise((resolve) => {
					db.collection('favorList')
						.where({
							place: address
						})
						.skip(start)
						.limit(n)
						.get({
							success: ({
								data
							}) => {
								console.log(data);

								this.page++
								this.shops = this.parseShops(data)
								// resolve(data);
								uni.hideLoading();
							}
						});
				});

			},
			/*处理店铺数据*/
			parseShops(data) {
				data.forEach((item, key) => {
					if (item.image_path === null) {
						item.image_path = 'mdata/img/404.jpg';
					}
				})
				return data;
			},
			/*更新店铺数据,上拉加载*/
			updataShops(address) {



				uni.showLoading({
					title: '数据加载中……'
				})

				const n = 5;
				const start = this.page * n;

				return new Promise((resolve) => {
					db.collection('favorList')
						.where({
							place: address
						})
						.skip(start)
						.limit(n)
						.get({
							success: ({
								data
							}) => {
								console.log(data);

								let newdata = this.parseShops(data)
								this.shops = [...this.shops, ...newdata]
								this.page++
								// this.shops=this.parseShops(data)
								// resolve(data);
								uni.hideLoading();
								if (data.length === 0) {
									uni.showToast({
										title: '亲，已经到底了',
										duration: 2000
									})
									//再次下拉就不更新了
									this.shouldUpdata = false

								}
							}
						});
				});


			},


			classfiyDetail(e) {
				// console.log(e.currentTarget.dataset.category)
				globalData.categoryName = e.currentTarget.dataset.category
				globalData.classfiyId = e.currentTarget.id
				uni.navigateTo({
					url: '/pages/classfiy/classfiy'
				})

			}

		}
	}
</script>

<style>
	.home_container {
		width: 750upx;
		height: 300upx;
		background: red;
	}

	.title_content {
		width: 750upx;
		height: 80upx;
		background: #00acec;
		color: #fff;
		font-size: 24upx;
		padding-top: 24upx;
	}

	.bar_title {
		color: white;
		margin-top: 60upx;
		margin-left: 34.5upx;
		font-size: 28upx;
	}

	.area_name {
		float: left;
		margin-left: 36upx;
		margin-right: 9upx;
	}

	.downIcon {
		width: 18upx;
		height: 10upx;
	}

	.people {
		float: right;
		margin-right: 28upx;
	}

	.people-img {
		width: 48upx;
		height: 48upx;
	}

	.menu_content {
		width: 750upx;
		height: 198upx;
		display: flex;
		flex-direction: row;
	}

	.menu_item {
		flex: 1;
		text-align: center;
	}

	.menu_item image {
		width: 88upx;
		height: 88upx;
		margin: 20upx 20upx;
	}

	.menu_item text {
		font-size: 24upx;
	}
</style>
